<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="./css/aui.css" />
  <link rel="stylesheet" type="text/css" href="./css/styleold.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
  <script type="text/javascript" src="./script/base.js"></script>
  <script type="text/javascript" src="./script/api.js"></script>
  <script type="text/javascript" src="./script/jquery.min.js"></script>
</head>
<body>
  <header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left" onclick="closeWin()">
      <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">银行卡认证</div>
  </header>
  <div class="aui-bar-nav-d"></div>

  <ul class="register-t">
    <li class="active">
      <i></i>
      <p>手机注册</p>
    </li>
    <span class="active"></span>
    <li class="active">
      <i></i>
      <p>银行卡认证</p>
    </li>
    <span class="active"></span>
    <li>
      <i></i>
      <p>开通银行存管</p>
    </li>
  </ul>
  <form id="bankForm" action="http://www.big-wealth.com/index.php?ctl=hrb&act=userRegister" method="post">
    <ul class="list">
      <input type="hidden" name="bankName" id="hideBankName">
      <input type="hidden" name="agent" value="h5">
      <input type="hidden" name="userid" id="userid">
      <li>
       <label class="title-1">真实姓名</label>
       <input class="text-3" type="text" placeholder="请输入您的真实姓名" id="username">
       <div class="check" id="checkName"></div>
     </li> 
     <li>
       <label class="title-1">身份证号</label>
       <input class="text-3" type="text" placeholder="请输入您的身份证号" id="idCard">
       <div class="check" id="checkID"></div>
     </li>  
     <li>
       <label class="title-1">银行卡号</label>
       <input class="text-3" type="text" placeholder="请输入您的银行卡号" id="bankNumber">
       <div class="check" id="checkBankNum"></div>
     </li> 
     <li class="aui-list-item-arrow">
       <label class="title-1">开户银行</label>
<!--        <select class="text-4" id="bank_name">
        <option value="未选择">请选择开户银行</option>
        <option value="工商银行">工商银行</option>
        <option value="建设银行">建设银行</option>
        <option value="农业银行">农业银行</option>
        <option value="交通银行">交通银行</option>
        <option value="邮政银行">邮政银行</option>
        <option value="其他银行">其他银行</option>
      </select> -->
      <span class="fa fa-angle-right"></span>
      <div class="check" id="checkBank"></div>
    </li> 
    <li>
     <label class="title-2">银行预留手机号码</label>
     <input class="text-4" type="text" placeholder="请输入银行预留手机号码" id="mobileNumber">
     <div class="check" id="checkMobile"></div>
   </li> 
 </ul>


 <div class="register-d"  tapmode>
  <button onclick="register_open()">开通</button>
</div>
</form>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">

  apiready = function(){

      // 银行
      var bank = $api.getStorage('bank');
      var bankName = $api.getStorage('bankName');
      var user_id = $api.getStorage('userid');

      // 给开户行名称隐藏域赋值
      if (bankName) {
        var hideBankName = document.getElementById("hideBankName");
        hideBankName.value = bankName;
      }

      // 给用户id隐藏域赋值
      var userid = document.getElementById("userid");
      userid.value = user_id;
      // 给用户手机号隐藏域赋值

      // var mobile = $api.getStorage('mobile');
      // var mobile_no = document.getElementById("mobile_no");
      // mobile_no.value = mobile;

      if (bank) {
        var bankClass = document.getElementById("afterClass");
        bankClass.className = bank;

        var bankNameClass = document.getElementById("aferName");
        bankNameClass.innerText = bankName;

        $("#beforeBank").hide();
        $("#afterBank").show();
        $api.setStorage('bank', '');
      }else{
        $("#afterBank").hide();
        $("#beforeBank").show();
      }

    }

  // 开通银行
  function register_open(){
    var name = $api.byId('username');
    var username = name.value;
      // 持卡人姓名不能为空
      if (!username) {
        $api.byId('checkName').innerText = '持卡人姓名不能为空';
        return false;
      }else{
        $api.byId('checkName').innerText = '';
      }

      var id = $api.byId('idCard');
      var idCard = id.value;
      // 身份证号码不能为空
      if (!idCard) {
        $api.byId('checkID').innerText = '身份证号码不能为空';
        return false;
      }else{
        $api.byId('checkID').innerText = '';
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
        if(reg.test(idCard) === false)  
        {  
          $api.byId('checkID').innerText = '身份证格式不正确'; 
          return  false;  
        }
        $api.byId('checkID').innerText = ''; 
      }

      var bank = $api.byId('bankNumber');
      var bankNumber = bank.value;
      // 银行卡号不能为空
      if (!bankNumber) {
        $api.byId('checkBankNum').innerText = '银行卡号不能为空';
        return false;
      }else{
        $api.byId('checkBankNum').innerText = '';
      }

      var bankName = $api.getStorage('bankName');
      // 银行不能为空
      if (!bankName) {
        $api.byId('checkBank').innerText = '请选择银行';
        return false;
      }else{
        $api.byId('checkBank').innerText = '';
      }

      var mobile = $api.byId('mobileNumber');
      var mobileValue = mobile.value;
      var re = /^1\d{10}$/
      if (re.test(mobileValue)) {
        $api.byId('checkMobile').innerText = '';
      }else{
        $api.byId('checkMobile').innerText = '请输入正确的手机号码';
        return false;
      }

      // // 验证验证码
      // var sms_code = $api.byId('sms_code');
      // var sms_codeValue = sms_code.value;
      // if (!sms_codeValue) {
      //   $api.byId('checkCaptcha').innerText = '验证码错误';
      //   return false;
      // }

      // 提交表单
      var form = document.getElementById("bankForm");
      form.submit();
    }

    function register_open(){
    // 真实姓名
    var user_name = $api.byId('user_name');
    var user_nameValue = user_name.value;
    alert(user_nameValue);
    // 身份证号
    var id_card = $api.byId('id_card');
    var id_cardValue = id_card.value;
    // 银行卡号
    var bank_card = $api.byId('bank_card');
    var bank_cardValue = bank_card.value;
    // 预留手机
    var phone_number = $api.byId('phone_number');
    var phone_numberValue = phone_number.value;
    // 开户行
    var bank_name = $api.byId('bank_name');
    var bank_nameValue = bank_name.value;

    api.openWin({
      name: 'register_open',
      url: './register_open.html',
      pageParam: {
        user_name: user_nameValue,
        id_card: id_cardValue,
        bank_card: bank_cardValue,
        phone_number: phone_numberValue,
        bank_name:bank_nameValue,
      }
    });
  };


  function closeWin(){
    
    var backUrl = api.pageParam.backUrl;
    if (backUrl == 'login') {
      api.closeToWin({
        name: 'login'
      });
    }else{
      api.closeWin({
      });
    }
  }
</script>
</html>